<!-- 首页 -->
<template>
  <view class="content home-page" id="home-page">
    <view
      class="headtit"
      :style="{height: titleHeight * 2 + 'px', paddingTop: menu.top + menu.height / 4 + 'px'}"
    >
      <view class="logo" @click="goTop"></view>
    </view>
    <!-- 顶部广告轮播图 -->
    <swiper class="top-banner-swiper" :autoplay="true" :interval="2000" :circular="true" indicator-dots>
      <swiper-item v-for="img in bannerList" :key="img">
        <image :src="img" class="banner-img" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <!-- 服务模块 -->
    <view class="service-grid">
      <view class="service-item" v-for="item in serviceList" :key="item.text" @click="serviceClick(item)">
        <image :src="item.icon" class="service-icon" mode="aspectFit"></image>
        <view class="service-text">{{ item.text }}</view>
      </view>
    </view>
    <view v-if="advList.length>0">
      <swiper
        v-if="advList.length > 1"
        id="swiperwrap"
        class="adv-swiper"
        indicator-active-color="#FFFFFF"
        :circular="true"
        :indicator-dots="advList.length>1"
        :disable-touch="true"
        :autoplay="true"
        :interval="5000"
        :duration="500"
      >
        <swiper-item @click="swiperJumpTo(item)" v-for="(item,index) in advList" :key="index">
          <view class="swiper-item">
            <image :src="item.imgUrlWap" mode></image>
          </view>
        </swiper-item>
      </swiper>
      <view v-else id="swiperwrap" class="adv-swiper" @click="swiperJumpTo(advList[0])">
        <image :src="advList[0].imgUrlWap"></image>
      </view>
    </view>
    <!-- 导航列表 -->
    <view
      v-if="advList.length>0"
      class="nav-list"
      id="nav-list"
      style="position:relative;top:-10rpx;"
    >
      <view
        class="nav-item"
        v-for="(item, index) in navList"
        :key="item.text"
        @click="navToPage(item)"
      >
        <view :class="['nav-img', 'tab-'+index]"></view>
        <text>{{item.text}}</text>
      </view>
    </view>
    <view class="contact-us">
      <img class="banner-img" mode="aspectFill" src="/static/images/contact-us.jpg" alt="">
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      advList: [],
      titleHeight: '',
      menu: '',
      navList: [
        { text: '金牌教练', url: '/mainProcess/goldCoach/index/index' },
        { text: '俱乐部', url: '/mainProcess/club/index/index' },
        { text: '明星球员', url: '/mainProcess/starStudent/index/index' },
        { text: '我要约课', url: '/personalCenter/myCourse/index/index' }
      ],
      bannerList: [
        '/static/images/banner1.jpg',
        '/static/images/banner2.jpg',
        '/static/images/banner3.jpg'
      ],
      serviceList: [
        { text: '宠物帮带', icon: '/static/images/service-pet.png', url: '/pages/petHelp/index' },
        { text: '房屋出租', icon: '/static/images/service-house.png', url: '/pages/houseRent/index' },
        { text: '体能培训', icon: '/static/images/service-train.png', url: '/pages/training/index' },
        { text: '社区帮购', icon: '/static/images/service-buy.png', url: '/pages/communityBuy/index' },
        { text: '跑腿服务', icon: '/static/images/service-life.png', url: '/pages/lifeService/index' },
        { text: '更多', icon: '/static/images/service-more.svg', url: '' }
      ],
    };
  },
  onLoad() {
    this.menu = wx.getMenuButtonBoundingClientRect();
    uni.getSystemInfo({
      success: e => {
        let rect = wx.getMenuButtonBoundingClientRect();
        if (e.system.toLowerCase().indexOf('ios') > -1) {
          let CustomBar = rect.bottom + (rect.top - e.statusBarHeight) * 2;
          let HeaderBar = CustomBar - e.statusBarHeight;
          this.titleHeight = HeaderBar;
        } else {
          let HeaderBar = rect.bottom + (rect.top - e.statusBarHeight) * 2;
          let CustomBar = HeaderBar - e.statusBarHeight;
          this.titleHeight = CustomBar;
        }
      }
    });
  },
  onShareAppMessage() {
    return {
      title: '八爪鱼',
      path: '/pages/index/index'
    };
  },
  methods: {
    goTop() {
      uni.pageScrollTo({ scrollTop: 0, duration: 1000 });
    },
    swiperJumpTo(item) {
      if (item.isTabBar == '1') {
        uni.switchTab({ url: item.urlWx });
      } else {
        uni.navigateTo({ url: item.urlWx });
      }
    },
    navToPage(item) {
      if (!item.url) {
        uni.showToast({ title: '敬请期待！', icon: 'none' });
        return;
      }
      uni.navigateTo({ url: item.url });
    },
    serviceClick(item) {
      if (!item.url) {
        uni.showToast({ title: '敬请期待！', icon: 'none' });
      } else {
        uni.navigateTo({ url: item.url });
      }
    },
  }
};
</script>

<style scoped lang="scss">
.home-page {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 15rpx;
  position: relative;
  z-index: 1;
  .headtit {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    .logo {
      width: 256rpx;
      height: 33rpx;
      background: url($public-baseImgUrl+'logo.png') no-repeat center center;
      background-size: 256rpx 33rpx;
    }
  }
  .nav-list {
    padding: 20rpx 0 0;
    display: flex;
    width: 100%;
    height: 200rpx;
    border-radius: 15rpx 15rpx 0 0;
    overflow: hidden;
    box-sizing: border-box;
    justify-content: space-around;
    background: #fff;
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 152rpx;
      .nav-img {
        width: 126rpx;
        height: 126rpx;
      }
      text {
        font-size: 26rpx;
        color: #999;
        line-height: 26rpx;
      }
      .tab-0 {
        background-image: url($public-baseImgUrl+'tab_01.png');
        background-size: 100% 100%;
      }
      .tab-1 {
        background-image: url($public-baseImgUrl+'tab_02.png');
        background-size: 100% 100%;
      }
      .tab-2 {
        background-image: url($public-baseImgUrl+'tab_03.png');
        background-size: 100% 100%;
      }
      .tab-3 {
        background-image: url($public-baseImgUrl+'tab_04.png');
        background-size: 100% 100%;
      }
    }
  }
  .adv-swiper {
    height: 496rpx;
    .swiper-item {
      height: 100%;
    }
    image {
      width: 100%;
      height: 100%;
    }
  }
  .banner-img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .service-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 30rpx 30rpx 30rpx;
  }
  .service-item {
    width: 48%;
    margin-bottom: 30rpx;
    background: #fdefe6;
    border-radius: 16rpx;
    box-shadow: 0 12rpx 18rpx rgba(46,135,255,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx 0 18rpx 0;
  }
  .service-icon {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 12rpx;
  }
  .service-text {
    font-size: 28rpx;
    color: #333;
    text-align: center;
  }
}
.contact-us {
  width: 100%;
  height: 500rpx;
  margin-bottom: 30px;
  .banner-img {
    width: 100%;
    height: 100%;
  }
}
.top-banner-swiper {
  width: 100%;
  height: 400rpx;
  margin-bottom: 30rpx;
  .banner-img {
    width: 100%;
    height: 100%;
  }
}
</style>
